<template>
  <div class="header">
    <div class="item1">
      <el-icon class="mr-2"><HomeFilled /></el-icon>
      <span class="title">后台管理系统</span>
    </div>
    <div class="item2">
      <div class="coolapse" @click="handleCollapse">
        <el-tooltip
        class="box-item"
        effect="dark"
        :content=collapseDesc
        placement="bottom"
        >
        <el-icon class="mr-5" v-if="mainStore.SiderLength === '250px'"
          ><Expand
        /></el-icon>
        <el-icon class="mr-5" v-else><Fold /></el-icon>
        </el-tooltip>
      </div>
      <div class="refresh">
        <el-tooltip
          class="box-item"
          effect="dark"
          content="刷新"
          placement="bottom"
        >
          <el-icon @click="refreshClick"><Refresh /></el-icon>
        </el-tooltip>
      </div>
    </div>
    <div class="item3 mr-10">
      <el-tooltip
        class="box-item"
        effect="dark"
        :content="screenDesc"
        placement="bottom"
      >
        <el-icon
          class="mr-6"
          v-if="!screenfull.isFullscreen"
          @click="toggleFullScreen"
          ><FullScreen
        /></el-icon>
        <el-icon class="mr-6" v-else @click="toggleFullScreen"><Aim /></el-icon>
      </el-tooltip>
      <el-avatar class="mr-2" :src="mainStore.userInfo.avatar" />

      <!-- 下拉菜单 -->
      <el-dropdown @command="handleCommand">
        <span class="el-dropdown-link text-light-100">
          admin
          <el-icon class="el-icon--right">
            <arrow-down />
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="rePassword">修改密码</el-dropdown-item>
            <el-dropdown-item command="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <!-- 抽屉组件 -->
      <FormDrawer
        ref="FormDrawreRef"
        class="text-black"
        title="修改密码"
        @onSubmit="onSubmit"
      >
        <el-form
          ref="formRef"
          :rules="rules"
          :model="form"
          label-width="auto"
          style="max-width: 600px"
        >
          <el-form-item
            class="w-[250px]"
            prop=" oldpassword"
            label="旧密码"
            label-width="80px"
          >
            <el-input
              v-model="form.oldpassword"
              placeholder="请输入旧密码"
              type="password"
              show-password
            >
            </el-input>
          </el-form-item>
          <el-form-item
            class="w-[250px]"
            prop="password"
            label="新密码"
            label-width="80px"
          >
            <el-input
              v-model="form.password"
              placeholder="请输入新密码"
              type="password"
              show-password
            >
            </el-input>
          </el-form-item>
          <el-form-item
            class="w-[250px]"
            prop="repassword"
            label="修改密码"
            label-width="80px"
          >
            <el-input
              v-model="form.repassword"
              placeholder="请确认密码"
              type="password"
              show-password
            >
            </el-input>
          </el-form-item>
        </el-form>
      </FormDrawer>
    </div>
  </div>
</template>

<script setup>
import { ArrowDown } from "@element-plus/icons-vue";
import { usemainStore } from "@/stores/mainStore";
import { Logout } from "@/composible/utils.js";
import screenfull from "screenfull";
import { ref, reactive, computed } from "vue";
import { repassword } from "@/api/manager";
import FormDrawer from "@/components/Formdrawer.vue";
//获取用户数据放入头像
const mainStore = usemainStore();
//刷新
const refreshClick = () => location.reload();
//关联全屏方法
const screenDesc = ref("全屏");
function toggleFullScreen() {
  if (screenfull.isEnabled) {
    screenfull.toggle();
    if (screenfull.isFullscreen) {
      screenDesc.value = "全屏";
    } else {
      screenDesc.value = "缩小";
    }
  }
}

//抽屉组件的关联数据
const FormDrawreRef = ref(null);
//表单
const form = reactive({
  oldpassword: "",
  password: "",
  repassword: "",
});

//发送请求的方法
function onSubmit() {
  FormDrawreRef.value.showLoading();
  repassword(form);
  FormDrawreRef.value.closeLoading();
}

//关联下拉菜单的方法：登录还是修改密码
function handleCommand(c) {
  switch (c) {
    case "logout":
      Logout();
      break;
    case "rePassword":
      FormDrawreRef.value.open();
      break;
  }
}

//折叠方法
const collapseDesc = ref("展开");
const handleCollapse = () => {
  mainStore.SiderLength = mainStore.SiderLength === "250px" ? "64px" : "250px";
  collapseDesc.value = mainStore.SiderLength === '250px' ? '折叠' : '展开';
  // console.log(mainStore.SiderLength);
};
</script>

<style lang="less">
.header {
  display: flex;
  height: 60px;
  position: fixed;
  top: 0px;
  right: 0px;
  left: 0px;
  justify-content: space-between;
  align-items: center;
  z-index: 100;
  @apply bg-blue-400 text-light-100;
  .item1 {
    margin-left: 5vw;
    @apply text-xl font-thin;
  }

  .item2 {
    display: flex;
    position: relative;
    left: -30vw;
  }

  .item3 {
    display: flex;
    align-items: center;
    .el-avatar {
      width: 32px;
      height: 32px;
    }
  }
}
</style>